<template>
  <div id="screen" :style="{'width':`${style.width}px`,'height':`${style.height}px`,'transform':`${style.transform}`}">
    <div class="app-container" style="padding:0;width:100%;height:100%">
       <div class="ranking-sale" v-if="cutIndex < 5 || cutIndex == 9">
<!--         <div style="text-align: right"><img src="https://pic.moresu.com/Fk0nLttQHuNR4JlEpwHYOUJgBy7A" style="width:280px"/></div>-->
         <div class="title-sale">销售部销售个人排名——<span v-if="cutIndex != 9">{{month}}月</span>{{ cutIndex | fiftext }}</div>
           <div class="ranking-con">
              <swiper :options="swiperOption" ref="mySwiper" class="swiper table-con" style="width:100%" v-loading="listLoading" v-if="list.length > 3">
                  <swiper-slide v-for="(item,index) in list" :key="index" style="width:100%">
                    <table class="ranking-table" border="0" cellpadding="0" cellspacing="0" align="center" >
                      <tr>
                        <th width="150"><div class="td-div">姓名</div></th>
                        <th width="300"><div class="td-div">{{  cutIndex | fiftext }}</div></th>
                        <th width="150"><div class="td-div">排名</div></th>
                      </tr>
                      <tr v-for="(ee,ii) in item">
                        <td><div class="td-div">{{ ee.realName }}</div></td>
                        <td><div class="td-div">{{ee.numData}}<span v-if="cutIndex == 3 || cutIndex == 4">%</span></div></td>
                        <td>
                          <img src="https://pic.moresu.com/FpOUKJ9MDFDdMpcTC7RAogz8_Nhx" style="width:30px" v-if="index == 0 && ii==0"/>
                          <img src="https://pic.moresu.com/Flryx21uhSma2yLob7TH2rR-h3XZ" style="width:30px" v-else-if="index == 0 && ii==1"/>
                          <img src="https://pic.moresu.com/FhrN92fLmZy8nbbE_G61gwhbHxvY" style="width:30px" v-else-if="index == 0 && ii==2"/>
                          <div class="td-div" v-else>{{(index*10)+(ii+1)}}</div>
                        </td>
                      </tr>
                      <tr v-for="ee in 10-item.length">
                        <td><div class="td-div"> </div></td>
                        <td><div class="td-div"> </div></td>
                        <td><div class="td-div"> </div></td>
                      </tr>
                    </table>
                  </swiper-slide>
                  <div class="swiper-button-prev" slot="button-prev"><i class="el-icon-arrow-left"></i></div>
                  <div class="swiper-button-next" slot="button-next"><i class="el-icon-arrow-right"></i></div>
                </swiper>
              <div v-else class="table-con" style="display: flex;justify-content: flex-start;align-items: flex-start" v-loading="listLoading">
                <table class="ranking-table" border="0" cellpadding="0" cellspacing="0" align="center"  v-for="(item,index) in list" :key="index" :style="{'margin-right': index < list.length-1 ? '30px' : 0}">
                  <tr>
                    <th width="150"><div class="td-div">姓名</div></th>
                    <th width="300"><div class="td-div">{{  cutIndex | fiftext }}</div></th>
                    <th width="150"><div class="td-div">排名</div></th>
                  </tr>
                  <tr v-for="(ee,ii) in item">
                    <td><div class="td-div">{{ ee.realName }}</div></td>
                    <td><div class="td-div">{{ee.numData}}<span v-if="cutIndex == 3 || cutIndex == 4">%</span></div></td>
                    <td>
                      <img src="https://pic.moresu.com/FpOUKJ9MDFDdMpcTC7RAogz8_Nhx" style="width:30px" v-if="index == 0 && ii==0"/>
                      <img src="https://pic.moresu.com/Flryx21uhSma2yLob7TH2rR-h3XZ" style="width:30px" v-else-if="index == 0 && ii==1"/>
                      <img src="https://pic.moresu.com/FhrN92fLmZy8nbbE_G61gwhbHxvY" style="width:30px" v-else-if="index == 0 && ii==2"/>
                      <div class="td-div" v-else>{{(index*10)+(ii+1)}}</div>
                    </td>
                  </tr>
                  <tr v-for="ee in 10-item.length">
                    <td><div class="td-div"> </div></td>
                    <td><div class="td-div"> </div></td>
                    <td><div class="td-div"> </div></td>
                  </tr>
                </table>
              </div>

           </div>
       </div>
      <div class="ranking-sale" v-if="cutIndex == 5">
<!--        <div style="text-align: right"><img src="https://pic.moresu.com/Fk0nLttQHuNR4JlEpwHYOUJgBy7A" style="width:280px"/></div>-->
        <div class="title-sale" style="margin-top:80px">{{ month }}月事业部目标完成排行榜</div>
        <div class="ranking-con">
          <div class="table-con" v-loading="listLoading">
            <table class="ranking-table" border="0" cellpadding="0" cellspacing="0" align="center">
              <tr>
                <th width="200"><div class="td-div">部门</div></th>
                <th width="400"><div class="td-div">毛利目标完成率</div></th>
                <th width="200"><div class="td-div">排名</div></th>
                <th width="400"><div class="td-div">出库吨数目标完成率</div></th>
                <th width="200"><div class="td-div">排名</div></th>
              </tr>
              <tr v-for="(item,index) in list" :key="index">
                <td><div class="td-div">{{ item.groupName }}</div></td>
                <td><div class="td-div">{{item.profitFinisheRate}}%</div></td>
                <td><div class="td-div">{{ item.profitRanking }}</div></td>
                <td><div class="td-div">{{ item.shipFinisheRate }}%</div></td>
                <td><div class="td-div">{{ item.shipRanking }}</div></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="ranking-sale" v-if="cutIndex == 6">
<!--        <div style="text-align: right"><img src="https://pic.moresu.com/Fk0nLttQHuNR4JlEpwHYOUJgBy7A" style="width:280px"/></div>-->
        <div class="title-sale" style="margin-top:80px">{{ month }}月销售部目标完成排名情况</div>
        <div class="ranking-con">
          <div class="table-con" v-loading="listLoading">
            <table class="ranking-table" border="0" cellpadding="0" cellspacing="0" align="center">
              <tr>
                <th width="150"><div class="td-div">部门</div></th>
                <th width="240"><div class="td-div">毛利总额</div></th>
                <th width="150"><div class="td-div">毛利排名</div></th>
                <th width="240"><div class="td-div">销量审核吨数</div></th>
                <th width="150"><div class="td-div">销量排名</div></th>
                <th width="320"><div class="td-div">毛利目标完成率</div></th>
                <th width="180"><div class="td-div">完成率排名</div></th>
                <th width="340"><div class="td-div">出库吨数目标完成率</div></th>
                <th width="180"><div class="td-div">完成率排名</div></th>
              </tr>
                <tr v-for="(item,index) in list" :key="index">
                  <td><div class="td-div">{{ item.departmentName }}</div></td>
                  <td><div class="td-div">{{item.totalSaleProfit}}</div></td>
                  <td><div class="td-div">{{ item.profitRanking }}</div></td>
                  <td><div class="td-div">{{ item.totalGoodsNum }}</div></td>
                  <td><div class="td-div">{{ item.goodsRanking }}</div></td>
                  <td><div class="td-div">{{ item.profitFinisheRate }}%</div></td>
                  <td><div class="td-div">{{ item.profitRateRanking }}</div></td>
                  <td><div class="td-div">{{ item.shipFinisheRate }}%</div></td>
                  <td><div class="td-div">{{ item.shipRateRanking }}</div></td>
                </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="ranking-sale" v-if="cutIndex == 7" style="background: url(https://pic.moresu.com/FozA2zi_9YSLPv3CRZOmy3DzTGSi) no-repeat">
<!--        <div style="text-align: right"><img src="https://pic.moresu.com/Fk0nLttQHuNR4JlEpwHYOUJgBy7A" style="width:280px"/></div>-->
        <div class="title-sale2">塑盟万华<br/>{{month}}月总销量</div>
        <div class="ranking-con" style="align-items: center;justify-content: flex-end;height:calc(100% - 50px)">
          <div>
            <div class="table-con" style="margin-top: 0;display: block" v-loading="listLoading">
              <table class="ranking-table ranking-table2" border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                  <th width="230"><div class="td-div" style="border-bottom-left-radius: 30px;border-top-left-radius: 30px;">排名</div></th>
                  <th width="230"><div class="td-div">姓名</div></th>
                  <th width="230"><div class="td-div">计算奖励吨数</div></th>
                  <th width="230"><div class="td-div" style="border-bottom-right-radius: 30px;border-top-right-radius: 30px;">奖励金额</div></th>
                </tr>
                <tr>
                  <td><div class="td-div">1</div></td>
                  <td><div class="td-div">陈 中</div></td>
                  <td><div class="td-div">2</div></td>
                  <td><div class="td-div">31.85</div></td>
                </tr>
                <tr>
                  <td><div class="td-div">1</div></td>
                  <td><div class="td-div">陈 中</div></td>
                  <td><div class="td-div">2</div></td>
                  <td><div class="td-div">31.85</div></td>
                </tr>
                <tr>
                  <td><div class="td-div">1</div></td>
                  <td><div class="td-div">陈 中</div></td>
                  <td><div class="td-div">2</div></td>
                  <td><div class="td-div">31.85</div></td>
                </tr>
                <tr>
                  <td><div class="td-div"></div></td>
                  <td><div class="td-div">总合计</div></td>
                  <td><div class="td-div">2</div></td>
                  <td><div class="td-div">31.85</div></td>
                </tr>
              </table>
            </div>
            <div style="color:#fff;text-align: center;padding-top: 40px;font-size: 24px">*数据截止至 {{fifdata}}</div>
          </div>

        </div>
      </div>
      <div class="ranking-sale" v-if="cutIndex == 8" style="background: url(https://pic.moresu.com/FgwyJwpNl42t_oflxmRAqA5NqlEN) no-repeat">
<!--        <div style="text-align: right"><img src="https://pic.moresu.com/Fk0nLttQHuNR4JlEpwHYOUJgBy7A" style="width:280px"/></div>-->
        <div class="title-sale2">塑盟昊源<br/>{{month}}月总销量</div>
        <div class="ranking-con" style="align-items: center;justify-content: flex-end;height:calc(100% - 50px)">
          <div>
            <div class="table-con" style="margin-top: 0;display: block" v-loading="listLoading">
              <table class="ranking-table ranking-table2" border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                  <th width="230"><div class="td-div" style="border-bottom-left-radius: 30px;border-top-left-radius: 30px;">排名</div></th>
                  <th width="230"><div class="td-div">姓名</div></th>
                  <th width="230"><div class="td-div">计算奖励吨数</div></th>
                  <th width="230"><div class="td-div" style="border-bottom-right-radius: 30px;border-top-right-radius: 30px;">奖励金额</div></th>
                </tr>
                <tr>
                  <td><div class="td-div">1</div></td>
                  <td><div class="td-div">陈 中</div></td>
                  <td><div class="td-div">2</div></td>
                  <td><div class="td-div">31.85</div></td>
                </tr>
                <tr>
                  <td><div class="td-div">1</div></td>
                  <td><div class="td-div">陈 中</div></td>
                  <td><div class="td-div">2</div></td>
                  <td><div class="td-div">31.85</div></td>
                </tr>
                <tr>
                  <td><div class="td-div">1</div></td>
                  <td><div class="td-div">陈 中</div></td>
                  <td><div class="td-div">2</div></td>
                  <td><div class="td-div">31.85</div></td>
                </tr>
                <tr>
                  <td><div class="td-div"></div></td>
                  <td><div class="td-div">总合计</div></td>
                  <td><div class="td-div">2</div></td>
                  <td><div class="td-div">31.85</div></td>
                </tr>
              </table>
            </div>
            <div style="color:#fff;text-align: center;padding-top: 40px;font-size: 24px">*数据截止至 {{fifdata}}</div>
          </div>

        </div>
      </div>
      <div class="ranking-sale" v-if="cutIndex == 10" style="background: url(https://pic.moresu.com/Fp-lE0xP5ZUoHUmINC7uov8wHfCL) no-repeat">
<!--        <div style="text-align: right"><img src="https://pic.moresu.com/Fk0nLttQHuNR4JlEpwHYOUJgBy7A" style="width:280px"/></div>-->
        <div class="table-menu">
          <div class="table-menu-item" :class="{'choose-item':cutIndex2 == 1}" @click="changeIndex2(1)">毛利排名</div>
          <div class="menu-line" style="padding:0 10px">|</div>
          <div class="table-menu-item" :class="{'choose-item':cutIndex2 == 2}" @click="changeIndex2(2)">毛利增长</div>
          <div class="menu-line" style="padding:0 10px">|</div>
          <div class="table-menu-item" :class="{'choose-item':cutIndex2 == 3}" @click="changeIndex2(3)">新客户成交毛利</div>
        </div>
        <div class="ranking-con" style="align-items: center;justify-content: flex-end;height:calc(100% - 50px)">
          <div>
            <div class="title-sale2" style="position: relative;left:0;top:0;margin-bottom: 40px;font-size: 80px">
              <div v-if="cutIndex2 == 1">{{ month }}月毛利排名</div>
              <div v-else-if="cutIndex2 == 2">{{ month }}月毛利增长排名</div>
              <div v-else-if="cutIndex2 == 3">{{ month }}月新客户成交毛利排名</div>
            </div>
             <div class="table-con" style="margin-top: 0;display: block" v-loading="listLoading">
              <table class="ranking-table ranking-table2" border="0" cellpadding="0" cellspacing="0" align="center" v-if="cutIndex2 == 1">
                <tr>
                  <th width="230"><div class="td-div" style="border-bottom-left-radius: 30px;border-top-left-radius: 30px;">排名</div></th>
                  <th width="230"><div class="td-div">姓名</div></th>
                  <th width="230"><div class="td-div">{{ month }}月总毛利</div></th>
                  <th width="230"><div class="td-div" style="border-bottom-right-radius: 30px;border-top-right-radius: 30px;">奖励金额</div></th>
                </tr>
                <tr v-for="(item,index) in list" v-if="index<3">
                  <td><div class="td-div">{{ index+1 }}</div></td>
                  <td><div class="td-div">{{ item.realName }}</div></td>
                  <td><div class="td-div">{{item.numData}}</div></td>
                  <td><div class="td-div">{{index == 0 ? 800 : index == 1? 500 : 300}}</div></td>
                </tr>
              </table>
               <table class="ranking-table ranking-table2" border="0" cellpadding="0" cellspacing="0" align="center" v-if="cutIndex2 == 2">
                 <tr>
                   <th width="156"><div class="td-div" style="border-bottom-left-radius: 30px;border-top-left-radius: 30px;">排名</div></th>
                   <th width="156"><div class="td-div">姓名</div></th>
                   <th width="156"><div class="td-div">{{ month }}月毛利</div></th>
                   <th width="156"><div class="td-div">{{ month-1 == 0 ? 12 :  month-1}}月毛利</div></th>
                   <th width="156"><div class="td-div">毛利增长值</div></th>
                   <th width="156"><div class="td-div" style="border-bottom-right-radius: 30px;border-top-right-radius: 30px;">奖励金额</div></th>
                 </tr>
                 <tr v-for="(item,index) in list" >
                   <td><div class="td-div">{{ index+1 }}</div></td>
                   <td><div class="td-div">{{ item.realName }}</div></td>
                   <td><div class="td-div">{{item.currentProfit}}</div></td>
                   <td><div class="td-div">{{item.lastProfit}}</div></td>
                   <td><div class="td-div">{{item.numData}}</div></td>
                   <td><div class="td-div">{{item.bonus}}</div></td>
                 </tr>
               </table>
               <table class="ranking-table ranking-table2" border="0" cellpadding="0" cellspacing="0" align="center" v-if="cutIndex2 == 3">
                 <tr>
                   <th width="230"><div class="td-div" style="border-bottom-left-radius: 30px;border-top-left-radius: 30px;">排名</div></th>
                   <th width="230"><div class="td-div">姓名</div></th>
                   <th width="230"><div class="td-div">总毛利</div></th>
                   <th width="230"><div class="td-div" style="border-bottom-right-radius: 30px;border-top-right-radius: 30px;">奖励金额</div></th>
                 </tr>
                 <tr v-for="(item,index) in list" v-if="index<3">
                   <td><div class="td-div">{{ index+1 }}</div></td>
                   <td><div class="td-div">{{ item.realName }}</div></td>
                   <td><div class="td-div">{{item.numData}}</div></td>
                   <td><div class="td-div">{{item.bonus}}</div></td>
                 </tr>
               </table>
            </div>
            <div style="color:#fff;text-align: center;padding-top: 40px;font-size: 24px">*数据截止至 {{fifdata}}</div>
          </div>

        </div>
      </div>
      <div class="ranking-sale" v-if="cutIndex == 11">
        <div class="title-sale"><span>{{date | fifDate('month')}}月</span><span>{{date | fifDate('day')}}日</span>冲刺排行榜</div>
        <div style="text-align: right;font-size: 26px;color:#F8CDA1;font-weight: bold;padding-right: 25px;">合计：{{orderGoodsNum}}</div>
        <div class="ranking-con">
          <swiper :options="swiperOption" ref="mySwiper" class="swiper table-con" style="width:100%;margin-top:0" v-loading="listLoading" v-if="list.length > 3">
            <swiper-slide v-for="(item,index) in list" :key="index" style="width:100%">
              <table class="ranking-table" border="0" cellpadding="0" cellspacing="0" align="center" >
                <tr>
                  <th width="150"><div class="td-div td-div-40">事业部</div></th>
                  <th width="150"><div class="td-div td-div-40">姓名</div></th>
                  <th width="150"><div class="td-div td-div-40">销量</div></th>
                  <th width="150"><div class="td-div td-div-40">排名</div></th>
                </tr>
                <tr v-for="(ee,ii) in item">
                  <td><div class="td-div td-div-40">{{ ee.groupName }}</div></td>
                  <td><div class="td-div td-div-40">{{ ee.realName }}</div></td>
                  <td><div class="td-div td-div-40">{{ee.orderGoodsNum}}<span v-if="cutIndex == 3 || cutIndex == 4">%</span></div></td>
                  <td>
                    <img src="https://pic.moresu.com/FpOUKJ9MDFDdMpcTC7RAogz8_Nhx" style="width:30px;vertical-align: middle" v-if="index == 0 && ii==0"/>
                    <img src="https://pic.moresu.com/Flryx21uhSma2yLob7TH2rR-h3XZ" style="width:30px;vertical-align: middle" v-else-if="index == 0 && ii==1"/>
                    <img src="https://pic.moresu.com/FhrN92fLmZy8nbbE_G61gwhbHxvY" style="width:30px;vertical-align: middle" v-else-if="index == 0 && ii==2"/>
                    <div class="td-div td-div-40" v-else>{{(index*10)+(ii+1)}}</div>
                  </td>
                </tr>
                <tr v-for="ee in 10-item.length">
                  <td><div class="td-div td-div-40"> </div></td>
                  <td><div class="td-div td-div-40"> </div></td>
                  <td><div class="td-div td-div-40"> </div></td>
                  <td><div class="td-div td-div-40"> </div></td>
                </tr>
              </table>
            </swiper-slide>
            <div class="swiper-button-prev" slot="button-prev"><i class="el-icon-arrow-left"></i></div>
            <div class="swiper-button-next" slot="button-next"><i class="el-icon-arrow-right"></i></div>
          </swiper>
          <div v-else class="table-con" style="display: flex;justify-content: flex-start;align-items: flex-start;margin-top: 0" v-loading="listLoading">
            <table class="ranking-table" border="0" cellpadding="0" cellspacing="0" align="center"  v-for="(item,index) in list" :key="index" :style="{'margin-right': index < list.length-1 ? '30px' : 0}">
              <tr>
                <th width="150"><div class="td-div td-div-40">事业部</div></th>
                <th width="150"><div class="td-div td-div-40">姓名</div></th>
                <th width="150"><div class="td-div td-div-40">销量</div></th>
                <th width="150"><div class="td-div td-div-40">排名</div></th>
              </tr>
              <tr v-for="(ee,ii) in item">
                <td><div class="td-div td-div-40">{{ ee.groupName }}</div></td>
                <td><div class="td-div td-div-40">{{ ee.realName }}</div></td>
                <td><div class="td-div td-div-40">{{ee.orderGoodsNum}}<span v-if="cutIndex == 3 || cutIndex == 4">%</span></div></td>
                <td>
                  <img src="https://pic.moresu.com/FpOUKJ9MDFDdMpcTC7RAogz8_Nhx" style="width:30px;vertical-align: middle" v-if="index == 0 && ii==0"/>
                  <img src="https://pic.moresu.com/Flryx21uhSma2yLob7TH2rR-h3XZ" style="width:30px;vertical-align: middle" v-else-if="index == 0 && ii==1"/>
                  <img src="https://pic.moresu.com/FhrN92fLmZy8nbbE_G61gwhbHxvY" style="width:30px;vertical-align: middle" v-else-if="index == 0 && ii==2"/>
                  <div class="td-div td-div-40" v-else>{{(index*10)+(ii+1)}}</div>
                </td>
              </tr>
              <tr v-for="ee in 10-item.length">
                <td><div class="td-div td-div-40"> </div></td>
                <td><div class="td-div td-div-40"> </div></td>
                <td><div class="td-div td-div-40"> </div></td>
                <td><div class="td-div td-div-40"> </div></td>
              </tr>
            </table>
          </div>

        </div>
      </div>
    </div>
    <!--菜单-->
      <div class="menu-div">
          <div class="menu-item" :class="{'choose-item':cutIndex == 1}" @click="changeIndex(1)">毛利</div>
          <div class="menu-line">|</div>
          <div class="menu-item" :class="{'choose-item':cutIndex == 2}" @click="changeIndex(2)">审核量</div>
          <div class="menu-line">|</div>
          <div class="menu-item" :class="{'choose-item':cutIndex == 3}" @click="changeIndex(3)">毛利完成率</div>
          <div class="menu-line">|</div>
          <div class="menu-item" :class="{'choose-item':cutIndex == 4}" @click="changeIndex(4)">出库完成率</div>
          <div class="menu-line">|</div>
          <div class="menu-item" :class="{'choose-item':cutIndex == 9}" @click="changeIndex(9)">近6月月均毛利</div>
          <div class="menu-line">|</div>
          <div class="menu-item" :class="{'choose-item':cutIndex == 5}" @click="changeIndex(5)">事业部</div>
          <div class="menu-line">|</div>
          <div class="menu-item" :class="{'choose-item':cutIndex == 6}" @click="changeIndex(6)">销售部</div>
          <div class="menu-line">|</div>
<!--          <div class="menu-item" :class="{'choose-item':cutIndex == 7}" @click="changeIndex(7)">万华</div>-->
<!--          <div class="menu-line">|</div>-->
<!--          <div class="menu-item" :class="{'choose-item':cutIndex == 8}" @click="changeIndex(8)">昊源</div>-->
<!--          <div class="menu-line">|</div>-->
          <div class="menu-item" :class="{'choose-item':cutIndex == 10}" @click="changeIndex(10)">毛利榜</div>
          <div class="menu-line">|</div>
          <div class="menu-item" :class="{'choose-item':cutIndex == 11}" @click="changeIndex(11)">每日冲刺</div>
      </div>
    <!--月份-->
    <div class="month-div">
      <el-date-picker
        v-if="cutIndex != 11"
        :clearable="false"
        @change="changeMonth"
        v-model="month2"
        value-format="yyyy-MM"
        type="month"
        style="cursor: pointer"
        placeholder="选择月">
      </el-date-picker>
      <el-date-picker
        v-else
        :clearable="false"
        @change="changeMonth"
        v-model="date"
        value-format="yyyy-MM-dd"
        type="date"
        class="input__200"
        style="cursor: pointer;"
        placeholder="选择日">
      </el-date-picker>
    </div>
    <!--logo-->
    <div style="position: fixed;right:20px;bottom:10px"><img src="https://pic.moresu.com/Fk0nLttQHuNR4JlEpwHYOUJgBy7A" style="width:200px"/></div>

  </div>
</template>

<script>
import {personTotalProfit,personTotalGoodsNum,personProfitFinisheRate,personShipFinisheRate,personAvgProfit,groupFinisheRate,departmentFinisheRate,profitIncreaseRanking,newCustomerProfitRanking,orderNumByDay} from "@/api/allInLine/report";
import { formatDate } from "@/utils/date";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "rankingList",
  data() {
    return {
      style: {
        width: "1920",
        height: "1080",
        transform: "scaleY(1) scaleX(1) translate(-50%, -50%)"
      },
      cutIndex:1,
      month:'',
      month2:'',
      cutIndex2:1,
      list:[],
      swiperOption:{
        slidesPerView: 3,
        spaceBetween: 40,
        //导航前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      listLoading:false,
      date:'',
      orderGoodsNum:0

    };

  },
  filters:{
    fiftext(index){
      if(index == 1){
        return '毛利总额'
      }else if(index == 2){
        return '审核量'
      }else if(index == 3){
        return '毛利目标完成率'
      }else if(index == 4){
        return '出库吨数目标完成率'
      }else if(index == 9){
        return '近6月月均毛利'
      }
    },
    fifDate(date,type){
      if(type == 'month'){
        return formatDate(new Date(date), 'M')
      }else if(type == 'day'){
        return formatDate(new Date(date), 'd')
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    fifdata(){
      let today = new Date();
      const cutYear = today.getFullYear();
      const cutMonth = today.getMonth() + 1;
      let year = new Date(this.month2+'-01').getFullYear();
      let month = new Date(this.month2+'-01').getMonth() + 1;
      if(cutYear == year && cutMonth == month){ //当前月
        return formatDate(today, 'yyyy-MM-dd')
      }else{ //历史日期
       let date2 = new Date(year, month, 0); //在JS中,如果使用new Date函数,可以使用传参数形式获取某一月的最后一天,并且自动判断润平年和大小月;
        return formatDate(date2, 'yyyy-MM-dd')
      }
    }
  },
  created() {
  },
  mounted() {
    let that = this;
    let date = new Date();
    this.month2 = formatDate(date, 'yyyy-MM')
    this.month = formatDate(date, 'M')
    this.date = formatDate(date, 'yyyy-MM-dd')
    that.setScale();
    /*窗口改变事件*/
    $(window).resize(()=> {
      that.setScale();
    });
    this.getList()
  },

  methods: {
    //销售毛利排行
    getList(){
      let fn
      if(this.cutIndex == 1){
        fn = personTotalProfit
      }else if(this.cutIndex == 2){
        fn =personTotalGoodsNum
      }else if(this.cutIndex == 3){
        fn =personProfitFinisheRate
      }else if(this.cutIndex == 4){
        fn = personShipFinisheRate
      }else if(this.cutIndex == 9){
        fn = personAvgProfit
      }else if(this.cutIndex == 5){
        fn = groupFinisheRate
      }else if(this.cutIndex == 6){
        fn = departmentFinisheRate
      }else if(this.cutIndex == 10 && this.cutIndex2 == 1){
        fn = personTotalProfit
      }else if(this.cutIndex == 10 && this.cutIndex2 == 2){
        fn = profitIncreaseRanking
      }else if(this.cutIndex == 10 && this.cutIndex2 == 3){
        fn = newCustomerProfitRanking
      }else if(this.cutIndex == 11){
        fn = orderNumByDay
      }
      let date = formatDate(new Date(this.month2+'-01'), 'yyyy-MM')
      if(this.cutIndex == 11){
        date = this.date
      }
      this.listLoading = true
      this.list = []
      fn({dateTime:date}).then((res)=>{
        if(this.cutIndex < 5 || this.cutIndex ==9 ){
          this.list = this.chunkArray(res.list,10)
        }else if(this.cutIndex == 11){
          this.list = this.chunkArray(res.list,10)
          this.orderGoodsNum = res.orderGoodsNum
        }else{
          this.list = res.list
        }
        this.listLoading = false
      })
    },
    //数组分段
    chunkArray(array, chunkSize) {
      let result = [];
      for (let i = 0; i < array.length; i += chunkSize) {
        result.push(array.slice(i, i + chunkSize));
      }
      return result;
    },
    changeIndex2(index){
      this.cutIndex2 = index
      this.getList()
    },
    changeIndex(index){
      this.cutIndex = index
      if(index == 10){
        this.changeIndex2(1)
      }
      this.getList()
    },
    changeMonth(){
      this.month = formatDate(new Date(this.month2+'-01'), 'M')
      this.getList()
    },
    getScale() {
      const w = window.innerWidth / this.style.width;
      const h = window.innerHeight / this.style.height;
      const z = w < h ? w : h;
      return {x:z,y:z};
    },
    setScale() {
      let scale = this.getScale();
      this.style.transform = "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
    },
  },
};
</script>
<style lang="scss">
.swiper-button-prev:after, .swiper-button-next:after {
  content: ' ';
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  right: 0;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  width: 25px;
  height: 35px;
  line-height: 35px;
  background-color: #d9d9d9;
  background-color: rgba(85, 8, 19, 0.9);
  margin-top: -20px;
  background-image: none;

  i {
    padding-left: 5px;
    font-size: 20px;
    color: #fff;
    line-height: 33px;
    font-weight: bold;
  }
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  left: 0;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  width: 25px;
  height: 35px;
  line-height: 35px;
  background-color: #d9d9d9;
  background-color: rgba(85, 8, 19, 0.9);
  margin-top: -20px;
  background-image: none;

  i {
    font-size: 20px;
    color: #fff;
    line-height: 33px;
    font-weight: bold;
  }
}
#screen{
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  .el-loading-mask{
    background-color: rgba(255, 255, 255, .15);
  }
  .el-loading-spinner .path{
    stroke: #fff;
  }
  .month-div{
    position: fixed;
    top:20px;
    right:0px;
  }
  .el-input--prefix .el-input__inner{
    background: rgba(85, 8, 19, 0.47);
    border: 0;
    height: 60px;
    border-radius: 30px;
    width: 160px;
    color: #fff;
    font-size: 20px;
    padding-left: 50px;
  }
  .input__200.el-input--prefix .el-input__inner{
    width: 200px;
  }
  .el-input__icon{
    font-size: 20px;
    width:40px;
    color:#fff;
    line-height: 60px;
  }
}
.menu-div{
  height:60px;
  border-radius: 30px;
  background: rgba(85,8,19,0.47);
  padding:0 20px;
  line-height: 60px;
  color:#fff;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 20px;
  position: fixed;
  top: 20px;
  left: 20px;
  .menu-item{
    padding:0 16px;
    cursor: pointer;
  }
  .menu-item:hover{
    color: rgb(248, 213, 161);
  }
  .menu-item.choose-item{
    color: rgb(248, 213, 161);
    font-weight: bold;
  }
}
.menu{
  width:60px;
  height:60px;
  border-radius: 50%;
  background: rgba(85,8,19,0.47);
  color:#fff;
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 30px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
.zdy-class.el-popover{
  background: none;
  border:0;
  box-shadow:0 0 0 0 rgba(0,0,0,0);
  //.menu-item{
  //  padding:0 16px;
  //  cursor: pointer;
  //}
  //.menu-item:hover{
  //  color: rgb(248, 213, 161);
  //}
  //.menu-item.choose-item{
  //  color: rgb(248, 213, 161);
  //  font-weight: bold;
  //}
}
.ranking-sale{
  width:100%;
  height:100%;
  background: url("https://pic.moresu.com/lhZdd2J5XIoRr0_yprp_n6QwEGrY") no-repeat;
  background-size: contain;
  padding:40px;
  .title-sale2{
    position: fixed;
    bottom: 110px;
    left: 200px;
    text-align: center;
    font-size: 110px;
    color: #f8cda1;
    font-weight: bold;
    line-height: 134px;
    text-shadow: 5px 5px 10px rgba(149,16,35,0.9)
    }
  .title-sale{
    color:#F8CDA1;
    text-align: center;
    font-size: 72px;
    font-weight: bold;
    margin-top:80px;
  }
  .ranking-con{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    .table-con{
      background: rgba(149,16,35,0.47);
      border-radius: 20px;
      padding:40px;
      margin-top: 40px;
      .ranking-table2.ranking-table{
        border-left:0;
        border-top:0;
        margin-right: 0;
        th{
          border-right:0;
          border-bottom:0;
          color:#C00000;
          padding:0;
          .td-div{
            background: rgb(248,205,161);
          }
        }
        td{
          border-right:0;
          border-bottom:1px solid #fde5a5;
          font-weight: bold;
        }
        tr:last-child{
          td{
            //border-bottom:0
          }
        }
      }
      .ranking-table{
         border-left:1px solid rgb(248,205,161);
         border-top:1px solid rgb(248,205,161);
         margin-right:0px;
         td,th{
           border-right:1px solid rgb(248,205,161);
           border-bottom:1px solid rgb(248,205,161);
           padding:0 10px;
           font-size: 26px;
         }
        th{
          color: rgb(248,205,161);
        }
        td{
          color: #fff;
          text-align: center;
        }
        .td-div{
          height:66px;
          line-height: 66px;
        }
        //.td-div.td-div-40{
        //  height:50px;
        //  line-height: 50px;
        //}
      }
      .ranking-table:last-child{
        margin-right: 0
      }
    }
  }
}
.table-menu{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  font-size: 32px;
  color: rgba(248,205,161,0.8);
  position: fixed;
  bottom: 88px;
  left: 142px;
  border-radius: 59px;
  padding: 10px 30px;
  border: 4px solid #f8cda1;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
  .table-menu-item{
    cursor: pointer;
    letter-spacing: 3px;
  }
  .table-menu-item.choose-item{
    color:#f8cda1;
    font-weight: bold;
  }
}
</style>
